<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>跑步中</title>
		<script src="https://webapi.amap.com/maps?v=2.0&key=d0e9d7d6b822e04676dcf4fb7f85594b"></script>
	</head>
	<body class="running">
		<main class="main">
			<p class="outside">户外跑</p>
			<p class="sport">运动中</p>
			<p id="num"><span id="mileage">0.03</span>公里</p>
			<p id="gps">
				GPS信号低,数据精准度低
				<span id="dian">..............................</span>
				<span class="iconfont zp-location"></span>
			</p>
			<div id="box">
				<p>
					<span class="iconfont zp-speed"></span>
					<span class="iconfont zp-time"></span>
					<span class="iconfont zp-calorie"></span>
				</p>
				<p>
					<sapn>配速</sapn>
					<sapn>用时</sapn>
					<sapn>千卡</sapn>
				</p>
				<p id="change">
					<sapn id="nub">12'47''</sapn>
					<sapn id="time">00:00:23</sapn>
					<sapn id="carlorie">1.86</sapn>
				</p>
			</div>
			<button id="btn">
				<span class="iconfont zp-stop"></span>
				<p>暂停</p>
			</button>
			<div id="hidden">
				<div id="playBox">
					<i class="iconfont zp-play"></i>
					继续
				</div>
				<div id="endBox">
					<i class="iconfont zp-good"></i>
					结束
				</div>
			</div>
		</main>
	</body>
</html>
